Layouts Best Practices

Overview

Layouts control the appearance of recommendations and promotions on the site. This page explores best practices for the use of layouts. Following the layout guidelines on the pages that follow helps safeguard performance of Recommend on a retailer's site.

All sites are different, and what works best for one is not guaranteed to translate into gains for another. As such, treat this guidance as general best practices, a foundation for optimization from which site-specific tuning should occur. Understand the logic behind our optimization methodology and the questions to ask, so that you can adapt and apply as appropriate.

Best Practices for Layouts

The “layout” refers to the user-facing design and functionality of recommendations. Effective layouts elicit an appropriate level of engagement and provide the core information required to drive the buying decision, or at least pique the customer’s curiosity. The intent is to make recommendations stand out relative to other site content, but not in a way that's disruptive to the shopping experience or visually disjointing.

Essentially, they must appear noticeable and native to the site. Below is an example of a best practice recommendations layout followed by general guidelines for each core component:

Orientation

While we typically prefer horizontal over vertical placements due to their ability to accommodate more salient product information, treat the latter to work around design constraints and to fit recommendations higher up on the page.

Product Name

• Limit the product name to 2-3 lines using an ellipsis to handle overflow. We want to make sure that we provide enough of a description for the customer to discern what the product is, but not so much that it overwhelms the customer or breaks the placement layout.
• Within Apparel and other “softlines” verticals, product names are a lesser priority and can sometimes be omitted. This is due to Apparel being an “aesthetic” purchase with the decision to click on a recommendation is driven by an emotional response to product imagery. This is elevated in higher-end and luxury categories, where in some cases, we have omitted product names in their entirely entirety due to them adding little value. Contrast that with certain “hardlines” verticals such as consumer electronics; within these, the product names reveal important specification and capabilities information that influence the customer’s decision to engage.
• The product name should be linkable to the Item page.

Product Images

• Product image should be set to minimum 120 x 120px.
• Set to the extent that this does not create load performance issues, we seek the same or better image resolution as is used elsewhere on the site.
• The product images should be linkable to the Item page.

Product Quantity

• Display 4-5 products by default and if a carousel is used, we should not recommend more than 20 items.
• Advanced Merchandising is an exception. For such highly curated experiences (for example, “Frequently Bought Together” or “Complete the Look”), it makes sense to display few items as the intent is to be more prescriptive with recommendations.

Pricing Display

• Include regular and sale prices, as well as MAP messaging (for example, “see price in cart”) if applicable.
• Emphasize sale pricing, particularly on retail sites that appeal to bargain buyers. If an item is discounted, strikethrough the regular price and display it in a smaller font. Present the sale price in a color consistent with how it’s displayed elsewhere on the site and include a “save story” (a statement of dollars saved) to underscore the discount. While it may seem trivial, color and formatting consistency are important because deviations increase the cognitive load for the customer.
• Home page recommendations are an exception. Our objective is to get the customer to descend into the funnel (that is, get to a Product page) as quickly as possible. Prices can introduce friction because they force the customer to assess affordability and potentially deter them from engaging. As such, consider suppressing prices from Home page recommendations—unless price is a major factor in getting customers to click as would be the case for a flash sale site.
• Luxury retailers or merchants that only sell their own branded merchandise are another exception. In the case of luxury retailers, price may be an afterthought for customers; they expect to pay top dollar, so it’s not necessary to display the prices in recommendations. Brand homogenous retailers that sell their own brands, typically within Apparel, can sometimes get away with this as well.

Ratings

If available, include ratings as they reinforce customer confidence in the presented recommendations. Add the ratings count in parenthesis.

Add-to-Cart Button

• We strive to at least include this on Add-to-Cart and Cart pages so as not to derail customers from their purchase path. Otherwise, at the deepest parts of the funnel, customers engaging with recommendations will click-through to Item pages, which pulls them further from the point of purchase.
• For retailers with configurable products—for example, Apparel for which size and color must be selected first—this may need to be integrated within a Quick-view overlay so that customer can customize their product prior to adding the item to cart.
• For retailers that commonly sell multiple units of the same product within a single transaction (for example, Office Supply or Grocery), consider adding a quantity box next to the add-to-cart button to accommodate such buys.

Strategy Messages

• For most sites, we endorse transparent messaging that indicates why the products are being recommended. For example, “Customers Who Viewed This Also Viewed” is always preferred over the opaque “You May Also Like" or “We Recommend”. Retailers with authoritative brands, particularly high-end, luxury sites, are an exception and can thrive with messages that promote their expertise, things like Our Stylists Suggest or These Items Pair Well Together.
• Due to the limited real estate within vertical placements, use abridged strategy messages to avoid unsightly lines of wrapping text (for example, customers also viewed instead of customers who viewed this also viewed).

Try to Avoid

Tabbed interfaces: Recommendations behind a tabbed interface offer very little value as customers rarely click to expose them. In certain cases, there is the additional downside that Algonomy will log a placement view regardless of whether the recommendations are actually seen. This will deflate the recommendations clickthrough rate in our dashboard.